<template>
  <div id="app">
    <button @click="refresh">刷新</button>
    <ImageVerify
      v-if="isShow"
      :images="images"
      @validate="check"
      @validated="checked"
    >
      <template slot="button">
        <img :src="button" alt="" >
      </template>
    </ImageVerify>
  </div>
</template>

<script>
import image1 from './images/check1.jpg'
import image2 from './images/check2.jpg'
import image3 from './images/check3.jpg'
import image4 from './images/check4.jpg'
import image5 from './images/check5.jpg'
import image6 from './images/check6.jpg'
import image7 from './images/check7.jpg'
import image8 from './images/check8.jpg'
import image9 from './images/check9.jpg'
import image10 from './images/check10.jpg'
import button from './images/slider-button.png'
import ImageVerify from '../packages/imageVerify/src/image-verify'

export default {
  name: 'App',
  components: {
    ImageVerify
  },
  data () {
    return {
      images: [image1, image2, image3, image4, image5, image6, image7, image8, image9, image10],
      button,
      isShow: true
    }
  },
  methods: {
    check (isPass, pos) {
      console.log('...', isPass, pos)
    },
    checked () {
      console.log('.....')
    },
    // 刷新
    refresh () {
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
